<template>
    <div class="body">
        <div class="head">
            <div class="pos">
                <span><a href="/index" class="iconfont icon-fanhui"></a></span>
            </div>
            <div class="a1">
                <h2>欢迎登录</h2>
                <p>第三方登录</p>
                <div class="house">
                    <span class="pic"><a class="iconfont icon-web-icon-"></a></span>
                    <span class="pic"><a class="iconfont icon-gongzhonghao"></a></span>
                    <span class="pic"><a class="iconfont icon-weibo00"></a></span>
                    <span class="pic"><a class="iconfont icon-changyonglogo25"></a></span>
                </div>
                <p>或用邮箱登录</p>
                <div class="zd">
                    <input type="email" v-model="emails" name="email" placeholder="邮箱" required="required">
                    <input type="password" v-model="pwd" name="pwd" pattern="\d{7}" placeholder="密码">
                    <input type="button" name="sub" value="登录" @click="login()">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data(){
            return {
                emails:'',
                pwd:''
            }
        },
        methods:{
            login(){
               this.$axios.post("http://localhost:3000/login","name="+String(this.emails)+"&password="+String(this.pwd)).then((data)=>{
                    console.log(data);
                    if(data.data.code=='200'){
                        alert(data.data.msg);
                        localStorage.setItem("local",0);
                        this.$router.replace({path:'/home'});
                    }else if(data.data.code=='400'){
                        alert(data.data.msg);
                    }else if(data.data.code=='404'){
                        alert(data.data.msg);
                    }
                })
            }
        }
    }

</script>

<style scoped lang="less">
    .head{height: 36rem}
    a{text-decoration: none;color: #7e6060}
    a:hover{color: #fff;}
    .zd a:hover{color: #ee9ca7;background-color: #fff;border:1px solid #ee9ca7;text-decoration: none;}
    .zd input{margin-bottom: 1rem;
        padding: 0.8rem 3.5rem 0.8rem 0.8rem;
        color: #ee9ca7;
        border: none;
        border: 1px solid;
        border-radius: 10px;
        outline: none;}
    .zd input:focus{
        box-shadow: 0 0 0 0.2rem rgba(238,156,167,.25);
        color: #ee9ca7;
    }
    .zd input:last-child{background-color: #ee9ca7;color: white;border-radius: 20px;padding-left: 3.5rem;}
    .zd input:last-child:hover{font-weight: bold;background-color: #fff;color: #ee9ca7;}
</style>